<script setup lang="ts">
import { ref } from 'vue'
import MyTransition from '@/components/my-transition/index.vue'
import { getImgSrc } from '@/views/product/reno14-pro/image/5/img-src'
import { useWindowSize } from '@vueuse/core'

const { width } = useWindowSize()
const activated = ref(0)
const gameCoverMo = getImgSrc('images-game-0-mo-1.png.webp')
const gameCoverPad = getImgSrc('images-game-0-pad-1.png.webp')
const gameCoverPc = getImgSrc('images-game-0-pc-1.png.webp')
const descData = [
  {
    mainTitle: '王者荣耀',
    desc: ['8 小时持久高帧体验，', '超神上分助攻，畅快打满全场。', '静音启动，远离尴尬。'],
    imgSrc: {
      mo: gameCoverMo,
      pad: gameCoverPad,
      pc: gameCoverPc,
    },
  },
  {
    mainTitle: '和平精英',
    desc: ['重磅支持极清画质，', '全局实时光照，拟真刺激战场。'],
    imgSrc: {
      mo: gameCoverMo,
      pad: gameCoverPad,
      pc: gameCoverPc,
    },
  },
  {
    mainTitle: '第五人格',
    desc: ['明暗生动的 HDR 画质，', '呈现电影级光影效果。'],
    imgSrc: {
      mo: gameCoverMo,
      pad: gameCoverPad,
      pc: gameCoverPc,
    },
  },
] as const
</script>

<template>
  <div class="flow-root">
    <div
      class="mt-[21.86vw] text-[2.625rem] leading-[1.2] text-center sm:mt-[4.75rem] lg:text-[clamp(2.625rem,-0.625rem+5.0781vw,4.25rem)]"
    >
      <p>宝藏款游戏神机</p>
      <p>游戏体验大升级</p>
    </div>

    <div class="" :class="{ 'pc-container-content-1312-grid': width >= 1024 }">
      <div class="mt-[20vw] relative middle-content sm:mt-[2.875rem]">
        <picture>
          <source
            media="(min-width: 1024px)"
            srcset="@/views/product/reno14-pro/image/5/images-game-hand-pc-1.png.webp"
          />
          <source
            media="(min-width: 640px)"
            srcset="@/views/product/reno14-pro/image/5/images-game-hand-pad-1.png.webp"
          />
          <img
            class="max-sm:aspect-[83/102] lg:aspect-[2/1] lg:w-full lg:h-full lg:object-cover lg:object-top"
            src="@/views/product/reno14-pro/image/5/images-game-hand-mo-1.png.webp"
            alt=""
            loading="lazy"
          />
        </picture>

        <div
          class="w-[84%] aspect-[353/161] absolute top-[6.5%] left-0 right-0 mx-auto -z-1 sm:w-[58%] sm:top-[8%] lg:w-[56%] lg:top-[10%]"
        >
          <MyTransition>
            <template v-for="(i, key) in descData" :key>
              <picture v-if="activated === key">
                <source media="(min-width: 1024px)" :srcset="i.imgSrc.pc" />
                <source media="(min-width: 640px)" :srcset="i.imgSrc.pad" />
                <img
                  class="w-full h-full lg:rounded-[2rem]"
                  :src="i.imgSrc.mo"
                  alt=""
                  loading="lazy"
                />
              </picture>
            </template>
          </MyTransition>
        </div>

        <div
          class="w-full min-h-[30%] absolute bottom-[15%] left-0 right-0 mx-auto grid justify-center gap-y-[1.75rem] grid-rows-[max-content_auto] sm:bottom-[6%] lg:gap-y-[clamp(1rem,0rem+1.5625vw,1.5rem)] lg:bottom-0"
        >
          <ul class="flex bg-[#00000026] rounded-full w-max justify-self-center">
            <li
              v-for="(i, key) in descData"
              :key
              class="text-xs px-[0.75rem] py-[0.375rem] rounded-full cursor-pointer"
              :class="{ 'item-activate': activated === key }"
              @click="activated = key"
            >
              {{ i.mainTitle }}
            </li>
          </ul>

          <div class="">
            <template v-for="(i, key) in descData" :key>
              <div v-if="activated === key" class="text-lg text-center leading-[1.4]">
                <p v-for="(_desc, _key) in i.desc" :key="_key">{{ _desc }}</p>
              </div>
            </template>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.item-activate {
  color: white;
  background-color: #000;
}
</style>
